<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单的隐藏与显示</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("h2").click(function(){
                // 获取当前所点击的标题所对应的列表
                let u = $(this).next();
                // 判断当前所点击的元素是隐藏的还是显示的
                // 如果是隐藏的
                if($(u).css("display") == "none"){
                    // 先将其他列表全部隐藏
                    $("ul").hide();
                    // 再将当前列表显示出来
                    $(u).show();
                } else{
                    // 如果当前列表是显示的,此时其他列表一定是隐藏的
                    // 此时只需要将当前列表隐藏起来即可
                    $(u).hide();
                }
            });
        })
    </script>
</head>
<body>
<!--
    三个列表最多只能展示一个选项,其他选项处于隐藏状态
    当点击某一个列表时,根据当前列表的状态的不同展示不同的效果
    如果当前列表是隐藏的,则显示该列表,并隐藏其他所有列表
    如果当前列表是显示的,则隐藏当前列表
-->
<h2>您最喜欢看的电影</h2>
<ul style="display: block;">
    <li>年会不能停</li>
    <li>熊出没之还我熊芯</li>
    <li>姜子牙</li>
    <li>哪吒之魔童降世</li>
</ul>
<h2>您最喜欢看的电视剧</h2>
<ul style="display: none;">
    <li>一念关山</li>
    <li>去有风的地方</li>
    <li>琅琊榜</li>
    <li>轩辕剑</li>
</ul>
<h2>您最喜欢的综艺节目</h2>
<ul style="display: none;">
    <li>奔跑吧</li>
    <li>极限挑战</li>
    <li>向往的生活</li>
    <li>王牌对王牌</li>
</ul>
</body>
</html>